import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import menuList, { MenuObj } from './menu';

function genRoute(list: MenuObj[] | undefined) {
  if (!!list && Array.isArray(list) && list.length) {
    return list.map(menu => {
      const ReactElement = menu.component;
      const props = Object.assign({}, menu.redirect);
      return (
        <Route
          key={menu.path}
          path={menu.path}
          element={<ReactElement {...props}></ReactElement>}
        >
          {genRoute(menu.children)}
        </Route>
      );
    });
  } else {
    return;
  }
}

const RouterIndex = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
        <Routes>{genRoute(menuList)}</Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default RouterIndex;
